<template>
    <div class="search-panel">
        <el-row class="m-header-searchbar">
          <el-col :span="4" class="left">
            <nuxt-link to="/"><img src="@/assets/img/logo.png" width="250" alt="校园外卖"/></nuxt-link>
          </el-col>
            <el-col :span="15" class="center">
                <div class="wrapper">
                    <el-input
                        v-model="search"
                        @focus="focus"
                        @blur="blur"
                        @input="input"
                        placeholder="搜索商家"/>
                    <button class="el-button el-button--primary">
                        <i class="el-icon-search"/>
                    </button>
                    <dl class="searchList" v-if="isSearchList">
                        <dd v-for="(item,idx) in searchList" :key="idx">
                            <span @click="toShop(item)">{{ item.shopName }}</span>
                        </dd>
                    </dl>
                </div>

                <ul class="nav">
                    <li>
                        <nuxt-link to="" class="food">美食</nuxt-link>
                    </li>
                    <li>
                        <nuxt-link to="" class="drink">甜点饮品</nuxt-link>
                    </li>
                    <li>
                        <nuxt-link to="" class="fruit">水果生鲜</nuxt-link>
                    </li>
                    <li>
                        <nuxt-link to="" class="supermarket">便利超市</nuxt-link>
                    </li>
                </ul>
            </el-col>
            <el-col :span="6" class="right">
                <ul class="security">
                    <li><i class="refund"/><p class="txt">随时退</p></li>
                    <li><i class="single"/><p class="txt">不满意面单</p></li>
                    <li><i class="overdue"/><p class="txt">过期退</p></li>
                </ul>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import * as homeApi from '@/server/home.js'
export default {
    data(){
        return {
            search:'',
            isFocus: false,
            hotPlace:[],
            searchList:['ss','ss','dd']
        }
    },
    methods:{
        focus: function(){
            this.isFocus = true;
        },
        blur: function(){
            let self = this;
            setTimeout(() => {
                this.isFocus = false;
            }, 200);
        },
        input: function(){
            homeApi.getSearching(this.search).then(res => {
                this.searchList=res.data.data;
            })
        },
        toShop: function(item) {
            homeApi.addSearchNum(item.id);
            this.$router.push({path:'detail',query:{category:item.shopKind,shopName:item.shopName}})
        }
    },
    computed:{
        isSearchList: function(){
            return this.isFocus;
        }
    }
}
</script>
